<template>
  <div class="mod-marketing-coupon">
    <div class="search-bar">
      <el-form :inline="true" class="search-form" ref="searchForm" :model="searchForm" size="small" >
        <div class="input-row">
          <el-form-item prop="payerName" label="交易人名称"  class="search-form-item">
            <el-input v-model="searchForm.payerName"  />
          </el-form-item>
          <el-form-item prop="payeeName" label="收款人名称"  class="search-form-item">
            <el-input v-model="searchForm.payeeName"  />
          </el-form-item>
          <el-form-item label="分润状态" profitType>
            <el-select v-model="searchForm.profitType" >
              <el-option label="全部"   :value="9" />
              <el-option label="待分润" :value="1" />
              <el-option label="已分润" :value="2" />
              <el-option label="待收货结算" :value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="交易类型" transType>
            <el-select v-model="searchForm.transType" >
              <el-option label="全部" :value="9" />
              <el-option label="数字发行" :value="1" />
              <el-option label="实物发行" :value="4" />
              <el-option label="二级市场" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="交易时间"  class="search-form-item">
          <el-date-picker
            v-model="dateRangeParam"
            :type="datePickerType"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            :range-separator="$t('date.tip')"
            :start-placeholder="$t('date.start')"
            @change="changeDateRangeParam"
            :end-placeholder="$t('date.end')">
          </el-date-picker>
          </el-form-item>
          <div class="default-btn primary-btn marginBottom" style="margin-left: 5px" @click="searchChange()">{{$t('product.search')}}</div>
          <div class="default-btn" style="margin-left: 5px" @click="resetSearchForm('searchForm')">{{$t('product.reset')}}</div>
<!--          <div class="default-btn" style="margin-left: 5px" @click="openProfit()">添加分润</div>-->
          <div class="default-btn" style="margin-left: 5px" @click="getDownload()">导出</div>
        </div>
      </el-form>
    </div>
    <div class="main-container">
      <div class="table-con coupon-table">
        <el-table
          ref="couponListTable"
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%">

          <el-table-column
            prop="payNo"
            label="分润号"
          >
          </el-table-column>
          <el-table-column
            prop="orderNumbers"
            label="平台订单号"
          >
          </el-table-column>
          <el-table-column
            prop="amount"
            label="分润金额"
          >
          </el-table-column>
          <el-table-column
            prop="bizUserFeeAmt"
            label="平台收取费用"
          >
          </el-table-column>
          <el-table-column
            prop="feeAmt"
            label="渠道收取费用"
          >
          </el-table-column>
          <el-table-column
            prop="payerBizUserNo"
            label="付款方用户编号"
          >
          </el-table-column>
          <el-table-column
            prop="payerName"
            label="付款人名称"
          >
          </el-table-column>
          <el-table-column
            prop="payeeBizUserNo"
            label="收款方用户编号"
          >
          </el-table-column>
          <el-table-column
            prop="payeeName"
            label="收款人名称"
          >
          </el-table-column>
          <el-table-column
            prop="payStatus"
            label="状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.payStatus == 3" class="tag-text">支付成功</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="transType"
            label="交易类型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.transType == 1" class="tag-text">数字发行</span>
              <span v-if="scope.row.transType == 4" class="tag-text">实物发行</span>
              <span v-if="scope.row.transType == 2" class="tag-text">二级市场</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="profitType"
            label="是否分润"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.profitType == 1" class="tag-text">待分润</span>
              <span v-if="scope.row.profitType == 2" class="tag-text">已分润</span>
              <span v-if="scope.row.profitType == 4" class="tag-text">待收货结算</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="分润时间"
          >
          </el-table-column>
          <div slot="append" v-if="totalMoney">
            <!-- class中出现了el-table字样的，为了复用el-table的样式 -->
            <table  cellspacing="0" cellpadding="0"  border="0" class="el-table__body" style="width: 50%">
              <tr ref="sum" class="el-table__row sum">
                <td ref="sum_cell" class="el-table__cell">合计</td>
                <td ref="sum_total_amount" class="el-table__cell">{{"交易金额:"+totalMoney}}</td>
                <td ref="sum_paid_amount" class="el-table__cell">{{"平台收取金额:"+profitMoney}}</td>
              </tr>
            </table>
          </div>
        </el-table>
      </div>
      <el-pagination
        v-if="dataList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>

    <el-dialog
      title="添加分润"
      :visible.sync="dialogVisible"
      :loading="dialogLoading"
      :before-close="handleClose"
      width="25%"
    >
      <el-form :model="profit" ref="profit">
        <el-form-item label="交易金额："  prop="totalMoney1">
          <span>{{profit.totalMoney1}}</span>
        </el-form-item>
        <el-form-item label="平台收取金额："  prop="totalMoney2">
          <span>{{profit.totalMoney2}}</span>
        </el-form-item>
        <el-form-item label="渠道手续费："  prop="totalMoney3">
          <span>{{profit.totalMoney3}}</span>
        </el-form-item>
        <el-form-item label="分润金额："  prop="totalMoney4">
          <el-input v-model="profit.totalMoney4" ></el-input><span style="color: red">* 分润比例后台配置</span>
        </el-form-item>
        <el-form-item label="用户手机号："   prop="phone">
          <el-input v-model="profit.phone"   />
          <div class="default-btn" @click="queryUser()">查询账户</div>
        </el-form-item>
        <el-form-item label="收款名称：" prop="name">
          <el-input v-model="profit.name" disabled />
        </el-form-item>
        <el-form-item label="收款编码：" prop="bizUserNo" v-show="false">
          <el-input v-model="profit.bizUserNo"/>
        </el-form-item>
      </el-form>
      <div class="btnBox">
        <el-button class="default-btn"  @click="handleClose()">取消</el-button>
        <el-button class="default-btn" type="primary"  @click="profitSend()">分润</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      dateRangeParam: null,
      datePickerType: 'daterange', // 日期筛选类型
      dialogVisible: false,
      dialogLoading: false,
      reason: '',
      auditData: null,
      dataForm: {
        name: '',
        code: '',
        status: null
      },
      dataList: [],
      totalMoney: 0,
      profitMoney: 0,
      dataListLoading: false,
      page: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      },
      searchForm: {
        payerName: null,
        payeeName: null,
        payStatus: 3,
        platformType: 1,
        transType: 9,
        profitType: 9,
        startTime: null,
        endTime: null
      },
      profit: {
        totalMoney1: 0, // 总金额
        totalMoney2: 0, // 平台收取金额
        totalMoney3: 0, // 渠道收取金额
        totalMoney4: 0, // 分润金额 65%
        phone: '',
        name: '',
        bizUserNo: ''
      }
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    queryUser () {
      if (!this.profit.phone) {
        this.$message({
          message: '先填写手机号',
          type: 'error',
          duration: 1500
        })
        return
      }
      this.$http({
        url: this.$http.adornUrl('/platform/sandProfit/getUserInfo'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {phone: this.profit.phone}
          ), false
        )
      }).then(({ data }) => {
        this.profit.name = data.realName
        this.profit.bizUserNo = data.sdUserId
      })
    },
    profitSend () {
      if(!this.profit.totalMoney4){
        this.$message({
          message: '分润金额必须大于0',
          type: 'error',
          duration: 1500
        })
        return
      }
      this.$http({
        url: this.$http.adornUrl('/platform/sandProfit/profit'),
        method: 'post',
        data: this.$http.adornData({
          'orderAmt': this.profit.totalMoney4,
          'bizUserNo': this.profit.bizUserNo,
          'name': this.profit.name
        })
      }).then(({ data }) => {
        this.$message({
          message: '分润成功',
          type: 'success',
          duration: 1500
        })
        this.dialogVisible = false
      })
    },
    changeDateRangeParam () {
      this.searchForm.startTime = this.dateRangeParam ? this.dateRangeParam[0] : '',
        this.searchForm.endTime = this.dateRangeParam ? this.dateRangeParam[1] : ''
    },
    handleClose () {
      this.dialogVisible = false
    },
    getDownload(){
      if (this.page.total === 0) {
        this.$message({
          message: "当前筛选出的记录列表为空",
          type: 'error',
          duration: 1500,
        })
        return
      }
      const loading = this.$loading({
        lock: true,
        target: '.mod-seckill-shopAuditing',
        customClass: 'export-load',
        background: 'transparent',
        text: this.$i18n.t('shop.exportIng')
      })
      this.$http({
        url: this.$http.adornUrl('/platform/sandProfit/exportProfit'),
        method: 'get',
        params: this.$http.adornParams({}),
        responseType: 'blob'
      }).then(({ data }) => {
        loading.close()
        let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
        let fileName = '平台收款记录.xlsx';
        let elink = document.createElement('a')
        if ('download' in elink) {
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
        this.$message({
          message: this.$i18n.t('shop.exportSuccess'),
          type: 'success',
          duration: 1500
        })
      }).catch((e) => {
        loading.close()
      })
    },
    openProfit () {
      if (this.dataList.length == 0) {
        this.$message({
          message: '先搜索需要分润的数据',
          type: 'error',
          duration: 1500
        })
        return
      }
      this.dialogVisible = true
      this.dialogLoading = true
      this.$http({
        url: this.$http.adornUrl('/platform/sandProfit/getProfit'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            this.searchForm
          ), false
        )
      }).then(({ data }) => {
        this.profit.totalMoney1 = data.totalMoney1
        this.profit.totalMoney2 = data.totalMoney2
        this.profit.totalMoney3 = data.totalMoney3
        this.profit.totalMoney4 = data.totalMoney4 // 添加对totalMoney4的赋值
        this.dialogLoading = false
      })
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/platform/sandProfit/getProfitPage'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            this.page,
            this.searchForm
          ), false
        )
      }).then(({ data }) => {
        this.dataList = data.records
        this.page.total = data.total
        this.profitMoney = data.profitMoney
        this.totalMoney = data.totalMoney
        this.dataListLoading = false
      })
    },
    // 条件查询
    searchChange () {
      this.page.total = 0
      this.page.current = 1
      this.getDataList()
    },
    // 刷新回调用
    refreshChange () {
      this.page.total = 0
      this.page.current = 1
      this.page.size = 10
      this.getDataList(this.page)
    },
    /**
     * 重置表单
     * @param {String} formName 表单名称
     */
    resetSearchForm (formName) {
      this.$refs[formName].resetFields()
      this.searchForm.startTime = '',
      this.searchForm.endTime = ''
      this.dateRangeParam = null
      this.refreshChange()
    },
    handleSizeChange (val) {
      this.page.size = val
      this.getDataList()
    },
    handleCurrentChange (val) {
      this.page.current = val
      this.getDataList()
    }

  }
}
</script>
<style lang="scss" scoped>
.marginBottom{margin-bottom:20px}
.el-input{
  width: 200px;
}
.el-form-item__label{
  display: block;
  width: 100px!important;
}
.default-btn {
  margin-left: 30px;
}
.btnBox {
  display: flex;
  justify-content: flex-end;
}
</style>
